<script setup lang="ts">
import { ref, watch } from 'vue'
import { getSpuListAPI, deleteSpuAPI } from '@api/product/spu/index.ts'
import type { spuResponseDataRecordsType } from '@api/product/spu/type.ts'
import { useCategoryStore } from '@/store/category.ts'
import { storeToRefs } from 'pinia'
import spuForm from './spuForm.vue'
import skuForm from './skuForm.vue'
import { ElMessage } from 'element-plus'

const { form } = storeToRefs(useCategoryStore())

// false：显示spu表格；true：添加或修改spu、sku
const screen = ref<boolean>(false)
// false：spu；true：sku
const skuOrSpuType = ref<boolean>(false)

// 获取spu数组
const loading = ref<boolean>(false)
const spuList = ref<spuResponseDataRecordsType[]>([])
const getSpuListFn = () => {
  loading.value = true
  getSpuListAPI({
    page: currentPage.value,
    limit: pageSize.value,
    category3Id: form.value.category3Id,
  }).then((res) => {
    loading.value = false
    spuList.value = res.data.records
    total.value = res.data.total
  })
}

// 如果三级分类id发生变化，调接口
watch(
  () => form.value.category3Id,
  () => getSpuListFn(),
)

// 分页器模块-------------------------
const currentPage = ref<number>(1)
const pageSize = ref<number>(10)
const total = ref<number>(0)

const handleSizeChange = (e: number) => {
  console.log(e)
  pageSize.value = e
  getSpuListFn()
}
const handleCurrentChange = (e: number) => {
  console.log(e)
  currentPage.value = e
  getSpuListFn()
}

// 点击添加spu按钮
const handleAddSPUFn = () => {
  screen.value = true
  skuOrSpuType.value = false;
  (spu.value as any).typeIsInfo = false;
  (spu.value as any).spuData.category3Id = form.value.category3Id;
  (spu.value as any).spuImageList = [];
  (spu.value as any).spuHasAttrList = []
}

// 点击修改SPU按钮
const spu = ref(null)
const handleEditFn = (row: spuResponseDataRecordsType, isInfo?: boolean) => {
  screen.value = true
  skuOrSpuType.value = false;
  (spu.value as any).initAttrDataFn(row, isInfo)
}

// 更新数据
const getDataFn = () => {
  getSpuListFn()
}

// 删除数据
const handleDeleteFn = (id: string | number) => {
  console.log(id);
  deleteSpuAPI(id).then(res => {
    if(res.code === 200){
      getSpuListFn()
      ElMessage.success(res.message)
    } else {
      ElMessage.error(res.message)
    }
  })
}
</script>

<template>
  <div>
    <!-- 三级分类 -->
    <Category :screen="screen" />

    <!-- 卡片 -->
    <el-card style="margin: 20px 0">
      <!-- spu表格 -->
      <div v-show="!screen">
        <el-button
          type="primary"
          icon="Plus"
          :disabled="!form.category3Id"
          @click="handleAddSPUFn"
        >
          添加SPU
        </el-button>

        <el-table
          v-loading="loading"
          :data="spuList"
          border
          style="margin: 20px 0"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="100px"
          ></el-table-column>
          <el-table-column prop="spuName" label="SPU名称"></el-table-column>
          <el-table-column prop="description" label="SPU描述"></el-table-column>
          <el-table-column label="操作" width="250px">
            <template #default="{ row }">
              <el-button icon="Plus" type="primary" title="添加SKU"></el-button>
              <el-button icon="Edit" type="warning" title="修改SPU" @click="handleEditFn(row)"></el-button>
              <el-button icon="Warning" type="info" @click="handleEditFn(row, true)"></el-button>
              <el-popconfirm
                title="是否要删除该数据？"
                @confirm="handleDeleteFn(row.id)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    icon="delete"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          v-if="spuList.length > 0"
          :page-sizes="[10, 20, 50, 100]"
          :small="true"
          :background="true"
          layout="prev, pager, next, jumper, -> , total, sizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <div v-show="screen">
        <!-- 添加spu、修改spu -->
        <spuForm @getDataFn="getDataFn" ref="spu" v-model:screen="screen" v-show="!skuOrSpuType" />

        <!-- 添加sku、修改sku -->
        <skuForm v-show="skuOrSpuType" />
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped></style>
